<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body>
        <!-- 商品信息展示 -->
        <el-table :data="[params]" border class="mb20">
            <el-table-column label="商品图片" prop="1688_product_name" width="100">
                <template slot-scope="scope">
                    <ImageUploadImg v-model="scope.row['1688_product_image']" :readOnly="true"></ImageUploadImg>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="1688_product_name" min-width="240"></el-table-column>
            <el-table-column label="商品属性" prop="varient_info" min-width="120"></el-table-column>
        </el-table>
        <el-form ref="form" :model="model" :rules="rules">
            <el-form-item label="商品SKU" prop="seller_sku">
                <div style="display: flex; justify-content: space-between">
                    <el-input v-model.trim="model.seller_sku" placeholder="多个SKU间用逗号隔开，最多支持200个" clearable style="width: 780px"> </el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border script>
            <el-table-column label="商品属性" min-width="240">
                <template slot-scope="scope">
                    <div style="display: flex" v-if="scope.row.left">
                        <div style="width: 60px">
                            <ImageUploadImg v-model="scope.row.left.image_info" :readOnly="true" class="small-img"></ImageUploadImg>
                        </div>
                        <div>{{ scope.row.left.seller_sku }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
                <template slot-scope="scope" v-if="scope.row.left">
                    <el-button type="text" @click="handleSelect(scope.row.left)">选择</el-button>
                </template>
            </el-table-column>
            <el-table-column label="商品属性" min-width="240">
                <template slot-scope="scope">
                    <div style="display: flex" v-if="scope.row.right">
                        <div style="width: 60px">
                            <ImageUploadImg v-model="scope.row.right.image_info" :readOnly="true" class="small-img"></ImageUploadImg>
                        </div>
                        <div>{{ scope.row.right.seller_sku }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
                <template slot-scope="scope" v-if="scope.row.right.seller_sku">
                    <el-button type="text" @click="handleSelect(scope.row.right)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>
        <div slot="footer" class="dialo2-footer">
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { get_skus_info, change_pair, update_1688 } from '@/api/purchase'
export default {
    name: 'SpecifyDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            isIndeterminate: false,
            checkAll: false,
            tableData: [],
            skuList: [],
            model: {
                seller_sku: undefined,
            },
            rules: {},
            pageInfo: {
                page: 1,
                limit: 10,
            },
            total: 0,
            save: false,
            loading: false,
        }
    },
    computed: {
        title() {
            return `${this.params.seller_sku ? '更换' : '添加'}1688商品`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {},
    mounted() {
        this.getList()
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            }
        },

        handleCheckAllChange(val, column, index) {
            this.model.sku_list = val ? this.skuList.map(pre => pre.skuId) : []
            this.isIndeterminate = false
        },
        handleCheckedChange(value, list) {
            let checkedCount = value.length
            this.checkAll = checkedCount === list.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < list.length
        },
        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },
        getList() {
            // if (!this.model.seller_sku) {
            //     return this.$message.error('商品SKU不能为空')
            // }
            // const params = { seller_sku: this.model.seller_sku.split(',') }
            const params = {
                ...this.pageInfo,
                ...this.model,
            }
            this.loading = true
            get_skus_info(params)
                .then(res => {
                    res.data.list.map((item, index) => {
                        if (index % 2 === 0) {
                            this.tableData.push({
                                index: index,
                                left: item,
                                right: {},
                            })
                        } else {
                            this.tableData[this.tableData.length - 1].right = item
                        }
                    })
                    console.log('tableData', this.tableData)

                    // this.tableData = res.data.list
                    this.total = res.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },

        handleSelect(row) {
            this.save = true
            const params = { 
                seller_sku: row.seller_sku,
                ['1688_product_id']: this.params['1688_product_id'],
                ['1688_product_url']: this.params['1688_product_url'],
                specId: this.params.specId,
                id: this.params.id,
                old_seller_sku: this.params.seller_sku ? this.params.seller_sku : undefined
             }
             if(this.params.seller_sku) {
                update_1688(params)
                 .then(() => {
                     this.$message.success('操作成功')
                     this.$emit('success', true)
                     this.cancel()
                    })
                    .finally(() => {
                        this.save = false
                    })
             } else {

                 change_pair(params)
                 .then(() => {
                     this.$message.success('操作成功')
                     this.$emit('success', true)
                     this.cancel()
                    })
                    .finally(() => {
                        this.save = false
                    })
                }
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .small-img {
    .upload-img-wrap {
        width: 54px;
    }
    .upload-img-box {
        width: 50px;
        height: 50px;
    }
    .upload-img {
        width: 48px;
        height: 48px;
    }
}
</style>
